﻿<phone:PhoneApplicationPage 
    x:Class="PeopleHub.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"        
    xmlns:ViewModels="clr-namespace:PeopleHub"     
    mc:Ignorable="d"  
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">

    <!--LayoutRoot is the root grid where all page content is placed-->
   
    <phone:PhoneApplicationPage.Resources>

        <phone:JumpListItemBackgroundConverter x:Key="BackgroundConverter"/>
        <phone:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>

        <Style x:Key="LongListSelectorJumpListStyle" TargetType="phone:LongListSelector">
            <Setter Property="GridCellSize" Value="111, 111"/>
            <Setter Property="LayoutMode" Value="Grid" />
            <Setter Property="Margin" Value="18,12,0,0"/>
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Margin="6" >
                            <TextBlock Text="{Binding Key}" 
                                           FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                           FontSize="48" Padding="11,0,0,0"
                                           Foreground="{Binding Converter={StaticResource ForegroundConverter}}" VerticalAlignment="Bottom" />
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="LongListSelectorHeaderTemplate">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="80"/>
                    <RowDefinition Height="57"/>
                    <RowDefinition Height="173"/>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="60"/>
                    <RowDefinition Height="40"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="185"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <TextBlock Text="all" Style="{StaticResource PhoneTextTitle1Style}"
                            Grid.Row="0" Grid.Column="0" Height="80" HorizontalAlignment="Left"/>

                <!--Blank space-->
                <Rectangle Fill="Transparent" Height="57" Width="480"
                           Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="4"/>

                <!--Replace rectangle with image-->
                <Rectangle Fill="{StaticResource PhoneAccentBrush}" Height="173" Width="173"
                           Grid.Row="2" Grid.Column="0"/>

                <TextBlock Height="173" Width="255" Text="'Some text I cannot find the style for, but here is my status'"
                           Grid.Row="2" Grid.Column="1" TextWrapping="Wrap" Margin="0,0,9,0"/>

                <TextBlock Text="Family" Style="{StaticResource PhoneTextExtraLargeStyle}"
                          Grid.Row="4" Grid.Column="0" HorizontalAlignment="Left"/>

            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="LongListSelectorGroupHeaderTemmplate">
            <Border Background="Transparent" Padding="5">
                <Border Background="{StaticResource PhoneAccentBrush}" BorderBrush="{StaticResource PhoneAccentBrush}" BorderThickness="2"	
                                       Width="62" Height="62" Margin="0,0,18,0"  				 
                                        HorizontalAlignment="Left">
                    <TextBlock Text="{Binding Key}" 
                               Foreground="{StaticResource PhoneForegroundBrush}" 
                               FontSize="48"
                               Padding="6"
                               FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center"/>
                </Border>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="LongListSelectorItemTemplate">
            <StackPanel Orientation="Horizontal" Margin="4,4">
                <Image Width="62" Height="62" Source="{Binding ImageUrl}" VerticalAlignment="Top"  Margin="0,0,15,0"/>
                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" VerticalAlignment="Center" HorizontalAlignment="Left"/>
            </StackPanel>
        </DataTemplate>

    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot"
           d:DataContext="{d:DesignInstance Type=ViewModels:PeopleViewModel, IsDesignTimeCreatable=true}">
        <phone:Panorama Title="people">
            <phone:PanoramaItem>
                <phone:LongListSelector Name="peopleLongListSelector"   
                                        ItemsSource="{Binding GroupedPeople}"
                                        JumpListStyle="{StaticResource LongListSelectorJumpListStyle}"  
                                        ListHeaderTemplate="{StaticResource LongListSelectorHeaderTemplate}"
                                        GroupHeaderTemplate="{StaticResource LongListSelectorGroupHeaderTemmplate}"
                                        ItemTemplate="{StaticResource LongListSelectorItemTemplate}"
                                        HideEmptyGroups ="true" IsGroupingEnabled ="true" LayoutMode="List">
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <phone:PanoramaItem Header="item2">
            </phone:PanoramaItem>
        </phone:Panorama>
    </Grid>
    
</phone:PhoneApplicationPage>